<template>
  <Crad>
    <template #title>
      <text class="fz-18 fw-7">{{ title }}</text>
      <text
        v-if="registerId && approvalStatus === ApprovalStatusEnum.PASSED"
        class="register-tag fz-14 px-8 py-4 linh-24 br-4 ml-8"
        style="white-space: nowrap"
      >
        您已报名
      </text>
    </template>
    <view class="basic-information">
      <!-- <text class="activity-statistics">
        已报名 {{ registrationsNumber }}
        <template v-if="enrollRestrict">/{{ remainingSeats }}</template>
      </text> -->
      <template v-if="payTicket">
        <view class="disFlxAC">
          <view class="price-text">
            <text class="fz-12">{{ DEFAULT_SYMBOL }}</text>
            <text class="fz-18">
              {{
                formatMoney({
                  money: !isNullOrUnDef(startPrice) ? startPrice : originalPrice,
                  showSymbol: false,
                })
              }}
            </text>
            <text v-if="startFlag" class="fz-12 ml-2">起</text>
          </view>
          <view v-if="tagName" class="fz-14 h-24 px-8 linh-24 ml-8 discount-label">
            <text>{{ tagName }}</text>
          </view>
        </view>
        <view v-if="!isNullOrUnDef(startPrice)" class="original-price disFlxAC fz-14">
          <text>原价：</text>
          <text>{{ formatMoney({ money: originalPrice }) }}</text>
          <text v-if="startFlag" class="fz-12 ml-2">起</text>
        </view>
      </template>

      <view class="activity-time">
        <text class="ali-icon icon-shijian icon-style"></text>
        <text class="time-str">
          活动时间：{{ formatToDateTime(startTime, 'YYYY年MM月DD日 HH:mm') }} ~
          {{ formatToDateTime(endTime, 'MM月DD日 HH:mm') }}
        </text>
      </view>

      <view v-if="address || addressName" class="location">
        <view class="addr-info">
          <text class="addressName text-overflow-1">{{ address }}</text>
          <text class="address">{{ addressName }}</text>
        </view>
        <view class="location-btn-box" @click="openLocation">
          <text class="ali-icon icon-weizhi icon-style"></text>
          <text class="text">导航</text>
        </view>
      </view>
    </view>
  </Crad>
</template>
<script setup lang="ts">
  import type { PropType } from 'vue';
  import { formatToDateTime } from '@/utils/dateUtil';
  import { useLocation } from '@/hooks/core/useLocation';
  import Crad from '@/components/Crad/index.vue';
  import { formatMoney, DEFAULT_SYMBOL } from '@/utils/number';
  import { propTypes } from '@/utils/propTypes';
  import { isNullOrUnDef } from '@/utils/is';
  import { ApprovalStatusEnum } from '@/enums/activityStatusEnum';

  const props = defineProps({
    title: {
      type: String,
      default: '',
    },
    /** 报名ID */
    registerId: propTypes.number,
    /**剩余位置 */
    remainingSeats: {
      type: Number,
      default: 0,
    },
    /**
     * 报名数量
     */
    registrationsNumber: {
      type: Number,
      default: 0,
    },
    /**活动开始时间 */
    startTime: {
      type: String,
      default: '',
    },
    /**活动结束时间 */
    endTime: {
      type: String,
      default: '',
    },
    /**活动地点 */
    addressName: {
      type: String,
      default: '',
    },
    /**活动详细地点 */
    address: {
      type: String,
      default: '',
    },
    /**经度 */
    longitude: {
      type: String as PropType<String | undefined>,
      default: '',
    },
    /**纬度 */
    latitude: {
      type: String as PropType<String | undefined>,
      default: '',
    },

    /** 最小价格 */
    startPrice: propTypes.number,
    startFlag: propTypes.bool,
    /** 原价 */
    originalPrice: propTypes.number,
    /** 优惠标签名 */
    tagName: propTypes.string,
    /** 报名状态 */
    approvalStatus: Number as PropType<ApprovalStatusEnum>,
    payTicket: propTypes.number.def(0),
  });

  const { openLocation: uniOpenLocation } = useLocation();

  function openLocation() {
    uniOpenLocation({
      name: props.addressName,
      address: props.address,
      longitude: Number(props.longitude),
      latitude: Number(props.latitude),
    });
  }
</script>
<style lang="scss" scoped>
  $priceColor: #ea5e0e;
  $desColor: #969799;
  .register-tag {
    background-color: #e29942;
    color: #fff;
  }
  .basic-information {
    display: flex;
    flex-direction: column;
    gap: 16rpx;
    .discount-label {
      border-radius: 4rpx;
      background-image: linear-gradient(90deg, #fdedc7 0.12%, #f7d9a2 100%);
      color: $priceColor;
    }
    .price-text {
      color: $priceColor;
    }
    .original-price {
      color: $desColor;
    }
    .activity-time {
      display: flex;
      align-items: center;
      gap: 16rpx;
      .icon-style {
        font-size: 32rpx;
        color: #ccccc8;
      }
      .time-str {
        color: #666664;
        font-size: 24rpx;
        line-height: 32rpx;
      }
    }
    .location {
      padding: 16rpx 32rpx;
      border-radius: 8px;
      background-image: url('https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/icon/location-bg.jpg');
      background-size: 100% 100%;
      display: flex;
      gap: 16rpx;
      align-items: center;

      .addr-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 8rpx;
        width: 446rpx;
        .addressName {
          color: #333;
          font-size: 28rpx;
          line-height: 40rpx;
        }
        .address {
          color: #999996;
          font-size: 24rpx;
          line-height: 32rpx;
        }
      }
      .location-btn-box {
        display: flex;
        padding: 8rpx 16rpx;
        border-radius: 24rpx;
        border: 2rpx solid #fff;
        background: rgba(255, 255, 255, 0.6);
        backdrop-filter: blur(2rpx);
        justify-content: center;
        align-items: center;
        gap: 8rpx;
        .icon-style {
          font-size: 24rpx;
          color: #666664;
        }
        .text {
          color: #666664;
          font-size: 24rpx;
          line-height: 32rpx;
        }
      }
    }
  }
</style>
